<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/sweetalert.css" rel="stylesheet" />
    <style>
        html{height:100%;}
        body{
            font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            font-size:14px;
            line-height:1.428571429;
            color:#3d3d3d;
            margin:0;
            padding:0;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .my-wallet-header{
            background-color:#FFDA44;
            padding-top:5%;
            padding-bottom:5%;
        }
        .my-wallet-header .banlance-info{
            border-right:1px solid #000;
        }
        .banlance-icon,.income-icon{
            background:url('./images/wx_iconlist.png') no-repeat;
            margin-left:15%;
            margin-top:3%;
            margin-right:10%;
        }
        .banlance-icon{
            width:22px;
            height:30px;
            background-position:-1px -55px;
        }
        .income-icon{
            width:33px;
            height:32px;
            background-position:-28px -54px;
        }
        .my-wallet-header dt{
            font-size:16px;
        }
        #my-banlance,#my-income{
            font-size:10px;
            color:#ff790b;
        }
        .capital-title{
            margin:15px;
            border-left:3px solid #FFDA44;
            padding-left:5px;
        }
        .capital-detail{
            border-top:1px solid #e5e5e5;
            width:100%;
            height:60%;
            overflow-x:hidden;
            overflow-y:auto;
        }
        .capital-detail .detail-list{
            height:90%;
        }
        .detail-list .list-group-item{
            border:none;
            border-top:1px solid #e5e5e5;
            width:92%;
            margin-bottom:15px;
            padding:15px 0 40px 0;
            margin-left:15px;
            background-color:transparent;
        }
        .detail-list .list-group-item:first-child{
            border-top:none;
        }
        .detail-list .left{
            padding-left:0;
        }
        .detail-list .icon{
            display:inline-block;
            width:22px;
            height:22px;
            background:url('./images/wx_iconlist.png') no-repeat;
            margin-top:8px;
            margin-right:12px;
        }
        .detail-list .in-wallect-icon{
            background-position:-229px 0;
        }
        .detail-list .out-wallect-icon{
            background-position:-229px -27px;
        }
        .detail-list dl dd{
            margin-top:2px;
            color:#7a7c80;
        }
        .money_num{
            font-size:16px;
            color:#ff6600;
            padding-left:0;
            padding-right:0;
            text-align:right;
        }
        .load-add{
            background-color:#FFDA44;
            border-radius:0;
        }
        .load-add:hover,.load-add:active{
            outline:none;
            border:none;
            box-shadow:none;
        }
        .load-adding{
            background-color:#DDDDDD;
        }
        .sweet-alert{
            background:#FFDA44;
            width:50%;
            height:63px;
            padding:0;
            left:25%;
        }
        .sweet-alert p{
            font-size:13px;
        }
        @media (min-width:375px){
            .my-wallet-header .banlance-info{
                border-right:1px solid #000;
                padding-left:0;
            }
            .income-info{
                padding-right:0;
            }
            .banlance-icon,.income-icon{
                background:url('./images/wx_iconlist_d.png') no-repeat;
                margin-left:10%;
                margin-top:0px;
            }
            .banlance-icon{
                width:44px;
                height:60px;
                background-position:-1px -110px;
            }
            .income-icon{
                width:64px;
                height:62px;
                background-position:-57px -109px;
            }
            .my-wallet-header dt{
                font-size:20px;
            }
            #my-banlance,#my-income{
                font-size:16px;
                margin-top:10%;
            }
            .capital-title{
                font-size:20px;
            }
            .detail-list .list-group-item{
                margin-bottom:20px;
                padding:25px 0 60px 0;
            }
            .detail-list dl dt{
                font-size:24px;
            }
            .detail-list dl dd{
                font-size:16px;
            }
            .detail-list .icon{
                display:inline-block;
                width:44px;
                height:44px;
                background:url('./images/wx_iconlist_d.png') no-repeat;
                margin-top:6px;
                margin-right:15px;
            }
            .detail-list .in-wallect-icon{
                background-position:-458px 0;
            }
            .detail-list .out-wallect-icon{
                background-position:-458px -54px;
            }
            .money_num{
                font-size:24px;
            }
        }
        @media (min-width:414px){
            .capital-title{
                font-size:24px;
            }
        }
    </style>
</head>
<body style="background-color:#f5f5f9" onload="addBanlance(1)">
<header class="container my-wallet-header">
    <div class="col-xs-6 banlance-info">
        <div style="margin-top:15px;">
            <div class="banlance-icon pull-left"></div>
            <dl class="pull-left">
                <dt>余额</dt>
                <dd id="my-banlance">￥0</dd>
            </dl>
        </div>
    </div>
    <div class="col-xs-6 income-info">
        <div style="margin-top:15px;">
            <div class="income-icon  pull-left"></div>
            <dl class="pull-left">
                <dt>收入</dt>
                <dd id="my-income">￥0</dd>
            </dl>
        </div>
    </div>
</header>
<h5 class=" capital-title">资金明细<span class="glyphicon glyphicon-refresh pull-right" aria-hidden="true"></span></h5>
<main class="capital-detail">
    <ul class="list-group detail-list"></ul>
</main>
<footer>
    <button class="btn btn-block btn-lg navbar-fixed-bottom load-add">加载更多</button>
</footer>
<script src="./js/jquery-1.9.1.min.js"></script>
<script src="./js/sweetalert.min.js"></script>
<script src="./js/hammer.min.js"></script>
<script src="./js/jquery.hammer.js"></script>
<script src="./js/my_balance.js"></script>
</body>
</html>